<script setup lang="ts">
import { ref } from "vue";
import KContainer from "../components/KContainer.vue";
import KDeploymentList from "../deployment/widgets/KDeploymentList.vue";
import KStatefulSetList from "../statefulset/widgets/KStatefulSetList.vue";
import DaemonSetList from "../daemonset/DaemonSetList.vue";
import NamespaceSelector from "@/views/domain/kubeHud/views/k8s/namespace/widgets/NamespaceSelector.vue";
import DeploymentCreate from "@/views/domain/kubeHud/views/k8s/deployment/DeploymentCreate/index.vue";

const activeTab = ref("deployment");
const tabList = [
  { label: "部署", value: "deployment" },
  { label: "有状态副本集", value: "statefulSet" },
  { label: "守护进程", value: "daemonSet" }
];

const namespace = ref("");
const labelSelector = ref("");
const workloadCreate = ref();

const openCreateDialog = () => {
  workloadCreate.value.open();
};
</script>

<template>
  <div class="workload-wrapper">
    <div class="workload-head">
      <el-segmented
        v-model="activeTab"
        type="card"
        class="mb-4"
        :options="tabList"
        :props="{ label: 'label', value: 'value', disabled: 'disabled' }"
        block
      />
    </div>

    <KContainer fill>
      <template #header>
        <div class="header-tools">
          <div class="w-64 flex-col">
            <el-text size="small">命名空间</el-text>
            <NamespaceSelector v-model="namespace" />
          </div>

          <div class="w-full">
            <el-input v-model="labelSelector" placeholder="标签选择器">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>

          <el-button type="primary" @click="openCreateDialog">创建</el-button>
        </div>
      </template>

      <KDeploymentList
        v-if="activeTab === 'deployment'"
        :namespace="namespace"
      />

      <KStatefulSetList
        v-else-if="activeTab === 'statefulSet'"
        :namespace="namespace"
      />

      <DaemonSetList
        v-else-if="activeTab === 'daemonSet'"
        :namespace="namespace"
      />
    </KContainer>

    <DeploymentCreate ref="workloadCreate" :type="activeTab" />
  </div>
</template>
<style lang="scss" scoped>
.workload-wrapper {
  display: flex;
  flex-direction: column;
}

.workload-head {
  width: 25rem;
  // min-width: 500px;
  .el-segmented {
    --el-segmented-item-selected-color: var(--el-color-white);
    --el-segmented-item-selected-bg-color: var(--el-color-primary);
    --el-border-radius-base: 20px;
    padding: 2px;
    background-color: var(--el-segmented-item-selected-color);
    min-height: 30px;
  }
}

.header-tools {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  background-color: var(--el-bg-color);
  padding: 10px;
  border-radius: 4px;
  align-items: flex-end;
}
</style>
